<template>
  <div class="container">
    <!-- 搜索栏 -->
    <div class="toolbar">
      设备编号:<input v-model="formDataOn.equipmentId" placeholder="请输入设备编号" class="search-input" />
      任务编号:<input v-model="formDataOn.maintenanceId" placeholder="请输入任务编号" class="search-input" />
      <button @click="getList()" class="search-button">搜索</button>
      <!-- <button class="search-button" @click="openCycleDialog">添加任务周期</button> -->
    </div>
    <p class="note" style="color: red;">注：设备保养计划，请务必先在保养标准库中制定保养标准</p>
    <!-- 表格 -->
    <el-table :data="filteredData" class="custom-table" border  :header-cell-style="{'text-align':'center'}"
    :cell-style="{'text-align':'center'}"  @selection-change="handlefilteredChange">
        <el-table-column  type="index" label="序列"/>
        <el-table-column prop="maintenanceId" label="保养ID" ></el-table-column>
        <el-table-column prop="userId" label="保养人" ></el-table-column>
        <el-table-column prop="maintenanceItem" label="检查项" width="600"></el-table-column>
        <el-table-column prop="maintenancePoint" label="检查点" ></el-table-column>
        <el-table-column prop="setValue" label="设定值" ></el-table-column>
        <el-table-column prop="maintenancePeriod" label="保养周期" class-name="clickable-cell">
          <template #default="scope">
            <template v-if="scope.row.maintenancePeriod === '0'">
                <el-button
                  type="text"
                  @click="openCycleDialog(scope.row)"
                  :disabled="scope.row.maintenancePeriod !== '0'">
                  {{ scope.row.maintenancePeriod === '0' ? '添加保养周期' : '已添加' }}
                </el-button>
            </template>
            <template v-else>
              <span class="disabled-text">已添加</span>
            </template>
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button type="text" size="small" @click="edit1(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteRow(scope.row.maintenanceId)" style="color: #dc3545;">删除</el-button>
          </template>
        </el-table-column> -->
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="totalOn > 0"
        :total="totalOn"
        :page.sync="formDataOn.pageNum"
        :limit.sync="formDataOn.pageSize"
        @pagination="getList"
      />

    <el-dialog :visible.sync="cycleDialogVisible" title="保养周期设置">
      <el-form :model="addData" label-width="100px">
        <!-- <el-form-item label="计划名称">
          <el-input v-model="addData.maintenancePlanName" placeholder="请输入保养计划名称"></el-input>
        </el-form-item> -->

        <el-form-item label="点检项目">
          <el-select v-model="addData.scheduleId" placeholder="请选择点检项目" @change="changeSchedulesId(addData.scheduleId)">
            <el-option
              v-for="item in schedules"
              :key="item.id"
              :label="item.period"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>



       <el-form-item label="保养人">
          <el-select v-model="addData.userId" placeholder="请选择保养人">
            <el-option
              v-for="item in byrlist"
              :key="item.userName"
              :label="item.userName"
              :value="item.userName">
            </el-option>
          </el-select>
        </el-form-item>



      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">完成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {planList,getMaintenanceSchedules,addMaintenancePlan,listByrs} from "@/api/wushui/maintenance";

export default {
  data() {
    return {
      schedules:[],
      byrlist:[],
      selectedRows:[],
      addData :{
          scheduleId:'',
          maintenancePlanName: '',
          maintenanceId: [],
          userId:'',
      },
      totalOn: 0,
      formDataOn : {
        pageNum: 1,
        pageSize: 10,
        equipmentId:'',
        maintenanceId:'',
      },
      searchQuery: '',
      tableData: [],
      filteredData: [],

      // 保养周期对话框控制
      cycleDialogVisible: false,

    };
  },
  created() {
    this.getList();
    this.getMaintenanceSchedules();
    this.getbyrs();
  },
  methods: {
    openCycleDialog(row) {
        console.log(111111,row);
        // 重置数据
        this.addData.maintenanceId = [];
        // 单条添加：从行数据获取ID
        if (row && row.maintenanceId) {
          this.addData.maintenanceId.push(row.maintenanceId);
        }else if (this.selectedRows.length > 0) {
          this.addData.maintenanceId = this.selectedRows.map(item => item.maintenanceId);
        } else { // 无选中时提示
          this.$message.warning('请至少选择一条任务！');
          return;
        }
        this.cycleDialogVisible = true;
        console.log(222222,this.addData)

      },
      handlefilteredChange(selection){
        this.selectedRows = selection;
        console.log("选中的行数据:", this.selectedRows);
      },
    changeSchedulesId(id){
        this.addData.scheduleId=id;
      },
    submit() {
        console.log('提交选择的点检项目:', this.addData);
        this.addData.maintenancePlanName='暂无'
        addMaintenancePlan(this.addData).then((response) => {
          console.log('response:', response)
          this.getList();
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
        this.cycleDialogVisible = false;
    },
    getMaintenanceSchedules(){
      getMaintenanceSchedules().then((response) => {
        console.log(response)
        this.schedules = response.rows;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },

    getbyrs(){
      listByrs().then((response) => {
        console.log(response)
          this.byrlist=response.rows;
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    },
    deleteRow(maintenanceId) {
      this.$confirm('确认删除该记录？', '提示', {
        type: 'warning'
      }).then(() => {
        // 调用删除API
        console.log('删除:', maintenanceId);
      });
    },
    getList() {
      console.log('formDataOn:', this.formDataOn);
      planList(this.formDataOn).then((response) => {
        this.filteredData = response.rows;
        this.totalOn = response.total;
        console.log('response:', response);
        }).catch(() => {
          this.$message.error("获取数据失败");
        });
    }

  },
};
</script>

<style scoped>
/* 页面容器 */
.container {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
}

/* 搜索栏样式 */
.toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.search-input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 10px;
}
.search-button,
.add-button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #fff;
}
.search-button {
  background-color: #007bff;
  margin-right: 10px;
}
.search-button:hover {
  background-color: #0056b3;
}
.add-button {
  background-color: #28a745;
}
.add-button:hover {
  background-color: #218838;
}

/* 提示信息 */
.note {
  font-size: 14px;
  color: #6c757d;
  margin-bottom: 10px;
}

/* 数据表格样式 */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border: 1px solid #ddd;
}
.data-table th {
  background-color: #007bff;
  color: white;
}
.data-table tr:nth-child(even) {
  background-color: #f9f9f9;
}
.data-table tr:hover {
  background-color: #f1f1f1;
}

/* 操作按钮样式 */
.action-button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  font-size: 14px;
}
.pause-btn {
  background-color: #ffc107;
  color: #fff;
}
.pause-btn:hover {
  background-color: #e0a800;
}
.edit-btn {
  background-color: #17a2b8;
  color: #fff;
}
.edit-btn:hover {
  background-color: #117a8b;
}
.delete-btn {
  background-color: #dc3545;
  color: #fff;
}
.delete-btn:hover {
  background-color: #c82333;
}
</style>
